<template>
    <div class="wrap">
           <div class="top"> 随手拍Rank </div>     
           <!-- <p class="sortTitle"> <span style="color:red"> 最新排行 </span>  {{ nowDay }}  </p> -->
           <div class="kklist">
                <div v-for="(item, index) in kklist" :key="index" class="ktv_item" > 
                    <span class="kk_sort"> {{ index+1 }} </span> 
                    <span class="kk_name"> {{ item.name }} </span> 
                    <p class="kk_score"> 次数  <span class="score_num"> {{ item.actionFrc }} </span>
                       <span > 事件 </span> <span style="margin-left:5px; font-size: 16px;color: darkred;">  </span>
                       <span style="margin-left:5px; font-size: 14px;color: darkred;"> {{  dateFilter( (new Date(item.createTime) ).getTime() )   }} </span>
                    </p> 
                    <div class="image_rr"> <van-image
                        :src="item.photo[item.photo.length-1]"   
                        @click="handleShow(item.photo, index)"                  
                        /> </div>   
                </div>
           </div>

           <!-- <p class="sortTitleAll"> <span style="color:red"> 总排行 </span>  </p>
           <div class="kklist">
                <div v-for="(item, index) in kklist_all" :key="index" class="ktv_item" > 
                    <span class="kk_sort"> {{ index+1 }} </span> 
                    <span class="kk_name"> {{ item.name }} </span> 
                    <p class="kk_score2"> 上传次数  <span class="score_num"> {{ item.actionFrc }} </span> </p> 
                    <div class="image_rr"> <van-image
                        :src="item.photo"   
                        @click="handleShow([item.photo], index)"                  
                        /> </div>   
                </div>
           </div> -->
           <div class="downPic"> 
            <van-image
                width="11rem"
                height="11rem"
                fit="contain"
                src="https://636c-cloud1-5gc90rkv0c4a396c-1310135976.tcb.qcloud.la/%E6%9A%82%E6%97%A0%E6%96%B9%E5%90%91.png?sign=05c977e2c2c8794973528042461d1890&t=1663295841"
            />
        </div>

    </div>



</template>

<script >
import { ref, onMounted, getCurrentInstance, inject } from 'vue';
import {useRouter, useRoute} from 'vue-router'
import moment from 'moment'
import { Dialog } from 'vant'
import { ImagePreview } from 'vant';



 export default { 
    setup(){
        let router = useRouter();
        let route = useRoute()
        const activeId = ref(1);
        const activeIndex = ref(0);
        const username = ref('');
        const password = ref('');
        const department = ref('')
        const user_score = ref('')
        const telphone = ref('')
        const kklist = ref([])
        const kklist_all = ref([])
        const nowDay = ref('')
        const dateFilter = (time)=>{
            return new Date(parseInt(time)).toLocaleString().replace(/:\d{1,2}$/,' ');  
        }
    onMounted(async()=>{
                        console.log('index K歌 Rank')          
                        const db = cloud.database();  
                        const _ = db.command
                        const $ = db.command.aggregate;
                        let mmday = ( moment().format('YYYYMMDD') ) 
                        nowDay.value = mmday
                        let single_list = await db.collection('adroom').aggregate(  )
                            .match({
                                actionFrc: _.gt(0),
                                verify: true
                                })
                            // .group({
                            //     _id: '$player',
                            //     sum: $.sum('$score'),
                            //     avg: $.avg('$score'),
                            //     song: ('$song')
                            // })
                            .sort({ actionFrc: -1 })
                            .limit(25)
                            .end(); 
                        let all_list = await db.collection('adroom').aggregate(  )                           
                            // .group({
                            //     _id: '$player',
                            //     // sum: $.sum('$score'),
                            //     // avg: $.avg('$score'),
                            //     // data: $.first('$$ROOT'),
                            //     master_data: $.push('$$ROOT')
                            // })    
                            //   .match({
                            //         score: _.gt(2000)
                            //     })               
                            .sort({ actionFrc: -1 })
                            .limit(25)
                            .end(); 
                        kklist.value = single_list.data
                        kklist_all.value = all_list.data
                        console.log('日排行', kklist.value, '总排行', kklist_all)
                    })
                const cloud = inject('$cloud')
                const handleShow = (item, index)=>{
                    console.log('弹出层', item)
                    ImagePreview({
                        images:item,
                        closeable: true,
                        // startPosition: index,
                    });
                }
                return {
                        router,
                        route ,
                        activeId ,
                        activeIndex ,
                        username ,
                        password,  
                        department, 
                        user_score ,
                        telphone ,
                        // items ,
                        // onSubmit
                        kklist,
                        nowDay,
                        kklist_all,
                        dateFilter,
                        handleShow
                }
            }
  }




</script>

<style lang="scss">
    body {
        margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
    }
    .top{
        margin: 7px auto;
        margin-bottom: 16px;
        width: 100%;
        background: lightcyan;
        padding-bottom: 5px;
        padding-top: 5px;
        font-weight: bold;
        font-size: 17px;
    }
    .tree{
        height: 500px !important;
    }
    .titleSlot{
        color: white ;
        font-weight: bold;
        background-color: darkgoldenrod;
        padding: 5px;
        width: 20px;
        font-size: 20px;
    }
    .kklist{
        width: 95%;
        margin: 0px auto;
        z-index: 100;
    }
    .wrap{
        background: #f7f8fa;
        height: 1000px;
    }

    .ktv_item{
        background-color: rgba(241, 232, 232, 0.3);
        position: relative;
        height: 65px;
        z-index: 101;
        border-bottom: 1px solid lightblue ;
    }
    .kk_sort {
        position: absolute;
        left: 5px;
        top:5px;
        font-size: 29px;
        color: red;
        font-weight: bold;
    }
    .kk_name{
        font-size: large;
        color: darkred;
        font-weight: bold;
         position: absolute;
        left: 29px;
        top:14px;
    }
    .score_num{
        color: darkgoldenrod;
        font-size: 20px;        
    }
    .kk_score {
            position: absolute;
            left: 99px;
    }
    .sortTitle {
            position: relative;
            left: -100px;
            margin-bottom: 4px;
            top: -10px;
            font-weight: bold;
            font-size: 19px;
    }
    .sortTitleAll{
            position: relative;
            left: -130px;
            margin-bottom: 4px;
            top: -10px;
            font-weight: bold;
            font-size: 19px;   
    }
    .downPic{
        // background: lightblue ;
        position: fixed;
        top: 200px;
        width: 100%;
        opacity: 0.4;
        z-index: 1;
    }
    .image_rr{
        position: absolute;
        right: 1px;
        width: 50px;
        top: 10px;
    }
    .kk_score2{
        position: absolute;
        left: 99px;
        font-size: 18px;
        font-weight: 900;
    }
</style>